<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="24">
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <a-form-item label="品牌">
            <a-select
              style="width:200px"
              v-decorator="[
                'brandId',
                {
                  rules: [{ required: true, message: '请选择品牌!' }]
                }
              ]"
              placeholder="全部"
            >
              <a-select-option :value="item.weid" v-for="item in brands" :key="item.weid">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="商品条码">
            <a-input
              placeholder="请输入条码"
              @change="skuChange"
              v-decorator="[
                'sku',
                {
                  rules: [{ required: true, message: '请输入条码!' }]
                }
              ]"
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" style="margin-top:20px">
        <a-table bordered :columns="columns" :rowKey="(record, index) => index" :data-source="dataSource" :pagination="false" :scroll="{ x: true }">
          <!-- <span slot="storeName" slot-scope="text, record"> {{storeMap[record.type]}}</span> -->
        </a-table>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { inventoryCheckList } from '@/api/micromall'
import { brands } from '../../util/brand'

const columns = [
  {
    title: '仓库名称',
    width: 200,
    dataIndex: 'warehouseName'
    // scopedSlots: { customRender: 'storeName' }
  },
  {
    title: '可用库存',
    width: 150,
    dataIndex: 'qty'
  },
  {
    title: '商品条码',
    width: 150,
    dataIndex: 'sku'
  },
  {
    title: '门店名称',
    width: 200,
    dataIndex: 'storeName'
  }
]

export default {
  data() {
    return {
      brands,
      storeMap: {
        QUYU: '区域共享仓',
        NT: '内淘共享仓',
        DP: '门店仓'
      },
      bordered: false,
      form: this.$form.createForm(this),
      columns,
      dataSource: []
    }
  },

  methods: {
    skuChange(value) {
      if (value == '') {
        this.dataSource = []
      }
    },
    async getInventoryCheckList(query) {
      const re = await inventoryCheckList(query)
      if (re.code == 200) {
        this.dataSource = re.data
      } else {
        this.dataSource = []
        this.$message.error(re.msg)
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.getInventoryCheckList(values)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
#copy {
  position: absolute;
  opacity: 0;
}
.poster {
  width: 50px;
  height: 50px;
}
.previmg {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 300px;
  }
}
</style>
